<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="" width="90%" center @open="openDialog" @close="closeDialog">
    <template #header="{ titleId }">
      <div :id="titleId" style="font-size: 22px; font-weight: bold; text-align: center">盘点报告</div>
    </template>
    <px-scrollbar class="view-equip-detail">
      <div style="display: flex; justify-content: space-between; flex-direction: row; align-items: center">
        <div class="view-equip-title">盘点基本详情</div>
        <px-button type="primary" style="margin-bottom: 16px" plain @click="downloadReport">报告下载</px-button>
      </div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">盘点名称</div>
            <div class="text">{{ formValue.takeStockName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">盘点编码</div>
            <div class="text">{{ formValue.takeStockCode }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">所属计划编码</div>
            <div class="text">{{ formValue.takePlanCode }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">科室</div>
            <div class="text">{{ formValue.classNameDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">盘点负责人</div>
            <div class="text">{{ formValue.takeStockPeopleName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">任务计划时间</div>
            <div class="text">{{ formValue.planStartDate }} - {{ formValue.planEndDate }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">执行状态</div>
            <div class="text">{{ formValue.executeStatusDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">盘点范围</div>
            <div class="text">
              {{ formValue.takeStockScope === "all" ? "全面盘点" : "指定盘点" }}
            </div>
          </div>
          <div class="view-equip-item">
            <div class="label">备注</div>
            <div class="text">{{ formValue.remark }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">工具盘点列表</div>
      <div class="view-equip-wrap view-equip-wrap-second">
        <div class="view-equip-content">
          <div v-if="formValue.takeStockScope === 'group'" class="view-equip-item middle">
            <div class="label">盘点组名称</div>
            <div class="text">{{ formValue.groupName }}</div>
          </div>
        </div>
      </div>
      <px-table :cell-class-name="getHighlightClass" :data="formValue.toolInfoDTOList" class="equip-table" size="small" max-height="350" border>
        <px-table-column prop="toolCode" label="工具编码" min-width="150" show-overflow-tooltip />
        <px-table-column prop="toolName" label="工具名称" min-width="150" show-overflow-tooltip />
        <px-table-column prop="toolStatusDesc" label="工具状态" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            <px-tag
              effect="plain"
              :style="{
                color: 'rgba(0, 0, 0, 0.8)',
                border: `1px solid ${tagBorderColorList[scope.row.toolStatus]}`,
                backgroundColor: `${tagBgColorList[scope.row.toolStatus]}`
              }"
            >
              {{ scope.row.toolStatusDesc }}
            </px-tag>
          </template>
        </px-table-column>
        <px-table-column prop="toolCategoryDesc" label="工具分类" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolUnitDesc" label="工具单位" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolModel" label="型号/规格" min-width="100" show-overflow-tooltip />
        <px-table-column prop="brandVal" label="品牌" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolPosition" label="工具位置" min-width="150" show-overflow-tooltip />
        <px-table-column prop="takeStockResult" label="盘点结果" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            <div v-if="scope.row.takeStockResult === 1">正常</div>
            <div v-else class="abnormal">异常</div>
          </template>
        </px-table-column>
        <px-table-column prop="unusualCause" label="异常原因" min-width="140" show-overflow-tooltip />
      </px-table>
    </px-scrollbar>
  </px-dialog>
</template>
<script setup lang="ts">
import { getToolInventory } from "@/api/equip/toolManage";
import { computed, getCurrentInstance, ref } from "vue";

const { proxy }: any = getCurrentInstance();
// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "inventoryId"]);
const visible = computed(() => props.visible);

const formValue = ref<Record<string, any>>({});

const tagBorderColorList = {
  0: "#4CCBA1",
  1: "#F37272",
  2: "#F7B648",
  3: "#7997A8"
};

const tagBgColorList = {
  0: "#E8F8F3",
  1: "#FEECEC",
  2: "#FEF5E6",
  3: "#F7F7F7"
};

const getHighlightClass = ({ row, column }) => {
  if (column.property === "takeStockResult" && row.takeStockResult === 0) {
    return "highlight-red";
  } else {
    return ""; // 默认没有高亮
  }
};

// 盘点报告下载
const downloadReport = () => {
  proxy.download("post", `/digitaltwins/api/v1/toolTakeStock/exportToolTakeStockReport`, { ids: [props.inventoryId] }, "盘点报告下载.xlsx");
};
// 打开弹窗
const openDialog = async () => {
  formValue.value = await getToolInventory(props.inventoryId);
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
  formValue.value = {};
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.equip-dialog-wrap {
  .view-equip-detail {
    height: calc(100vh - 320px);
  }
}
:deep(.px-table .highlight-red) {
  background-color: rgb(254 236 236);

  .px-table__cell {
    background-color: rgb(254 236 236) !important;
  }
}
</style>
